<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>图书分类</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	{% include 'public/static_top.html' %}
	<style>
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-col-xs-9 {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			.mui-control-content {
				/*display: block;*/
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			.show {
				display: block;
			}
		</style>
</head>

<body>
	<div class="mui-content mui-row mui-fullscreen">
		<div class="mui-col-xs-3">
			<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                {% for category in top_categories %}
				<a class="mui-control-item {% if loop.index==1 %} mui-active {% endif %}" data-index='{{ loop.index }}' href="#">{{ category.name }}</a>
                {% endfor %}
			</div>
		</div>
		<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
            {% for categories in sub_categories %}
            <div id="content{{ loop.index }}" class="mui-control-content">
				<ul class="mui-table-view">
                    {% for category in categories %}
					<li class="mui-table-view-cell"><a href="{{ url('library:class_books', args=(category.id, )) }}">{{ category.name }}</a></li>
                    {% endfor %}
				</ul>
			</div>
            {% endfor %}
		</div>
	</div>
	
	<!--底部菜单栏-->
	{% include 'public/footer.html' %}
	
	{% include 'public/static_bottom.html' %}
	<script type="text/javascript">
        document.querySelectorAll('nav.mui-bar>a.mui-tab-item')[1].classList.add('mui-active');
		mui.init();
		var current_div = document.getElementById("content1")
		current_div.classList.add('show');
		mui('.mui-segmented-control').on('click', 'a.mui-control-item', function() {
			index = this.getAttribute('data-index');
			current_div.classList.remove('show');
			current_div = document.getElementById("content" + index);
			current_div.classList.add('show')
		})
	</script>
</body>

</html>